@extends('layout.master')
@section('title', '商品详情')
@section('content')
    <link rel="stylesheet" href="{{URL::asset('css/layui.css')}}">
    <body class="easyui-layout" id="app">
    <div class="box">
        <form id="form" enctype="multipart/form-data">
            {{csrf_field()}}
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td style="width: 10%"><span style="color: red">*</span>模型名称:</td>
                    <td style="width: 90%"><input type="text" class="goodname" name="goodname" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>下载价格:</td>
                    <td><input type="text" class="price" name="price" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>兑换价格:</td>
                    <td><input type="text" class="score" name="score" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>库存数:</td>
                    <td><input type="text" class="repertory" name="repertory" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>灯光:</td>
                    <td><input type="text" class="dg" name="dg" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>材质贴图:</td>
                    <td><input type="text" class="cztt" name="cztt" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>风格:</td>
                    <td><input type="text" class="fg" name="fg" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>面数:</td>
                    <td><input type="text" class="ms" name="ms" value=""></td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>是否置顶(首页轮播图):</td>
                    <td style="text-align: left">
                        <select name="stick" id="stick" style="height: 80%;width: 50%">
                            <option value=""></option>
                            <option value="1">是</option>
                            <option value="2">否</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>所属大类:</td>
                    <td style="text-align: left">
                        <select name="ssdl" id="ssdl" style="height: 80%;width: 50%" onchange="loadChildren(this)">
                            <option value=""></option>
                            <option value="1">家具软装</option>
                            <option value="2">家装空间</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>所属子类:</td>
                    <td style="text-align: left">
                        <select name="sszl" id="sszl" style="height: 80%;width: 50%">
                            <option value=""></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>vip商品:</td>
                    <td style="text-align: left">
                        <select name="vipgood" id="vipgood" style="height: 80%;width: 50%">
                            <option value=""></option>
                            <option value="1">是</option>
                            <option value="2">否</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>图片上传(列表单图):</td>
                    <td style="text-align: left"><button type="button" class="layui-btn" id="picsbtn1">图片上传</button></td>
                </tr>
                <tr>
                    <td>图片预览1:</td>
                    <td>
                        <div class="layui-upload">
                            <blockquote class="layui-elem-quote layui-quote-nm"><div class="layui-upload-list" id="demo1"></div></blockquote>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red">*</span>图片上传(细节多图):</td>
                    <td style="text-align: left"><button type="button" class="layui-btn" id="picsbtn2">图片上传</button></td>
                </tr>
                <tr>
                    <td>图片预览2:</td>
                    <td>
                        <div class="layui-upload">
                            <blockquote class="layui-elem-quote layui-quote-nm"><div class="layui-upload-list" id="demo2"></div></blockquote>
                        </div>
                    </td>
                </tr>
                <tr>
{{--                    <td>模型文件路径:</td>--}}
{{--                    <td>--}}
{{--                        <div class="layui-upload">--}}
{{--                            <blockquote class="layui-elem-quote layui-quote-nm"><div class="layui-upload-list" id="demo3"></div></blockquote>--}}
{{--                        </div>--}}
{{--                    </td>--}}
                    <td><span style="color: red">*</span>模型文件路径:</td>
                    <td><input type="text" class="modelfiles" name="modelfiles" value=""></td>
                </tr>
{{--                <tr>--}}
{{--                    <td><span style="color: red">*</span>模型上传:</td>--}}
{{--                    <td style="text-align: left"><button type="button" class="layui-btn" id="picsbtn3">模型上传</button></td>--}}
{{--                </tr>--}}
{{--                <tr>--}}
{{--                    <td>模型文件路径:</td>--}}
{{--                    <td>--}}
{{--                        <div class="layui-upload">--}}
{{--                            <blockquote class="layui-elem-quote layui-quote-nm"><div class="layui-upload-list" id="demo3"></div></blockquote>--}}
{{--                        </div>--}}
{{--                    </td>--}}
{{--                </tr>--}}
                {{--                <tr>--}}
                {{--                    <td><span style="color: red">*</span>商品内容:</td>--}}
                {{--                    <td><div id="editor" type="text/plain" style="height:100%;width: 100%"></div></td>--}}
                {{--                </tr>--}}
                <tr>
                    <td>操作:</td>
                    <td>
                        <input type="hidden" value="" name="goodid">
                        <input type="button" class="easyui-linkbutton" onclick="$api.addgood()" data-options="iconCls:'icon-save'" value="提交" style="width:80px;height: 32px;">
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <link rel="stylesheet" href="{{URL::asset('css/table.css')}}">
{{--    <script src="{{URL::asset('js/ueditor.config.js')}}"></script>--}}
{{--    <script src="{{URL::asset('js/ueditor.all.js')}}"></script>--}}
{{--    <script src="{{URL::asset('js/lang/zh-cn/zh-cn.js')}}"></script>--}}
    <script src="{{URL::asset('js/easyui-lang-zh_CN.js')}}"></script>
    <script src="{{URL::asset('js/layui.all.js')}}"></script>
    <style>table{margin: 0}</style>
    <script>
        //ue=UE.getEditor('editor',{initialFrameHeight:500,initialFrameWidth:924});
        let upload = layui.upload,picsarr= [],picsarr2="",modefiles="";
        upload.render({
            elem: '#picsbtn1',
            url: $api.url+"uploadfile",
            multiple: false,
            enctype:"multipart/form-data",
            method:"post",
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            before: function(obj){
                //预读本地文件示例，不支持ie8
                layer.load(); //上传loading
                obj.preview(function(index, file, result){
                    //$('#demo1').remove();
                    $('#demo1').append('<div class="item"><span class="close">删除</span><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><div>')
                });
            },
            done: function(res){
                //上传完毕
                //{msg: "20200319/5e72f98a77fb5.jpg"}
                //console.log(res);
                picsarr2 = res.msg;
                layer.closeAll('loading'); //关闭loading
                layer.msg("上传成功");
            }
        });
        upload.render({
            elem: '#picsbtn2',
            url: $api.url+"uploadfile",
            multiple: true,
            method:"post",
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            before: function(obj){
                //预读本地文件示例，不支持ie8
                layer.load(); //上传loading
                obj.preview(function(index, file, result){
                    $('#demo2').append('<div class="item"><span class="close">删除</span><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><div>')
                });
            },
            done: function(res){
                //上传完毕
                picsarr.push(res.msg);
                layer.closeAll('loading'); //关闭loading
                layer.msg("上传成功");
            }
        });
        upload.render({
            elem: '#picsbtn3',
            url: $api.url+"uploadfile",
            multiple: true,
            accept: 'file', //普通文件
            exts: 'zip|rar|7z', //只允许上传压缩文件
            method:"post",
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            before: function(obj){
                //预读本地文件示例，不支持ie8
                layer.load(); //上传loading
                obj.preview(function(index, file, result){
                    let filename = file.name;
                    $('#demo3').append("<div class='item'>"+filename+"&nbsp;&nbsp;&nbsp;&nbsp;<span class='close'>删除</span><div>")
                });
            },
            done: function(res){
                //上传完毕
                modefiles=res.msg;
                layer.closeAll('loading'); //关闭loading
                layer.msg("上传成功");

            }
        });

        $('.layui-upload-list').on('click','.close',function () {
            let index = $(this).parent().index();
            $(this).parent().remove();
            picsarr.splice(index,1);

        })
        function loadChildren(obj){
            let pid = $(obj).val();
            $.get($api.url+"getChildren",{pid},res=>{
                let str="";
                res.forEach( (item,index) =>str+=`<option value='${item.id}'>${item.type}</option>`)
                $("#sszl").empty();
                $("#sszl").append(str);
            });
        }
    </script>
    <style>
        .layui-upload-img{width: 80px;height: 80px;margin-right: 8px}
        .item{float: left;position: relative;margin-right: 22px}
        .item .close{position: absolute;top: 0;right: -22px;}
        .layui-upload-list{overflow: hidden;margin: 0;}
    </style>
    </body>
@endsection
